<template>
  <a-drawer
    title="操作日志详情"
    placement="right"
    :closable="true"
    :width="1080"
    :visible="visible"
    @close="onClose"
  >
    <a-spin :spinning="spinning">
      <a-descriptions
        class="eip-descriptions"
        bordered
        size="small"
        :column="{ xxl: 1 }"
      >
        <a-descriptions-item label="操作时间">
          {{ log.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="登录名">
          {{ log.createUserCode }}
        </a-descriptions-item>
        <a-descriptions-item label="操作人名称">
          {{ log.createUserName }}
        </a-descriptions-item>
        <a-descriptions-item label="描述">
          {{ log.remark }}
        </a-descriptions-item>
        <a-descriptions-item label="控制器">
          {{ log.controllerName }}
        </a-descriptions-item>
        <a-descriptions-item label="方法">
          {{ log.actionName }}
        </a-descriptions-item>
        <a-descriptions-item label="来源">
          {{ log.remarkFrom }}
        </a-descriptions-item>
        <a-descriptions-item label="地址">
          {{ log.url }}
        </a-descriptions-item>
        <a-descriptions-item label="方法时间(秒)">
          {{ log.actionExecutionTime }}</a-descriptions-item
        >
        <a-descriptions-item label="展示时间(秒)">
          {{ log.resultExecutionTime }}</a-descriptions-item
        >
        <a-descriptions-item label="请求类型">
          {{ log.requestType }}
        </a-descriptions-item>
        <a-descriptions-item label="客户端IP">
          {{ log.remoteIp }}
        </a-descriptions-item>
        <a-descriptions-item label="请求数据">
          {{ log.requestData }}
        </a-descriptions-item>
        <a-descriptions-item label="响应数据">
          {{ log.responseData }}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-drawer>
</template>
<script>
import { findById } from "@/services/system/log/operation-detail";
export default {
  name: "detail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      log: {},
      spinning: false,
    };
  },
  methods: {
    showDrawer() {
      this.$emit("close");
    },

    onClose() {
      this.$emit("close");
    },

    /**
     * 根据Id查找
     */
    find(id) {
      let _this = this;
      _this.spinning = true;
      findById(id).then(function(result) {
        let form = result.data;
        _this.log.createTime = form.createTime;
        _this.log.createUserCode = form.createUserCode;
        _this.log.createUserName = form.createUserName;
        _this.log.remark = form.remark;
        _this.log.controllerName = form.controllerName;
        _this.log.actionName = form.actionName;
        _this.log.remarkFrom = form.remarkFrom;
        _this.log.url = form.url;
        _this.log.actionExecutionTime = form.actionExecutionTime;
        _this.log.requestType = form.requestType;
        _this.log.resultExecutionTime = form.resultExecutionTime;
        _this.log.remoteIp = form.remoteIp;
        _this.log.requestData = form.requestData;
        _this.log.responseData = form.responseData;
        _this.spinning = false;
      });
    },
  },
};
</script>
<style scoped>
.eip-descriptions /deep/ .ant-descriptions-item-colon {
  width: 140px !important;
}
</style>
